/*
 * 小氏小蚊简历less主文件 2017.6.22
 * 邮箱：846506584@qq.com
 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0;} 
body{
    font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2","Lucida Grande","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","WenQuanYi Micro Hei",sans-serif;
}
h1, h2, h3, h4, h5, h6{ font-size:100%; } 
ul, ol ,li{ list-style:none;list-style:none;}
a {text-decoration:none;color:#07111b;}
img { border:0; }
body{
    background:#F3F5F7;
    color:#07111b;
    font-size:15px;
}
*{
    font-size: 16px;
    font-family: "微软雅黑";
}

//头部
div.header{
    width:100%;
    height:48px;
    box-shadow: 0 4px 8px 0 rgba(7,17,27,0.1);
    position:fixed;
    top:0px;
    z-index: 99;
    background:#F3F5F7;
    ul.con_box{
        width:1200px;
        margin: auto;
        li{
            width:170px;
            float:left;
            text-align: center;
            a{
                line-height: 48px;
                &:hover{
                    color:#F01414;
                }
                text-shadow:2px 2px 4px #C3C3C3;
            }
        }
    }
}

//个人信息
div.info{
    width:1200px;
    height:360px;
    margin:auto;
    margin-top:78px;
    background:#77D7BB;
    border-radius: 3px;
    &:hover div.info_box table tr td div.box{
        border-top: 60px solid #F3F5F7;
        border-left:60px solid #A09F9F;
    }
    div.img_box{
        width:233px;
        height:360px;
        box-shadow: 0 4px 4px 0 rgba(7,17,27,0.1);
        float:left;
        img.top{
            width:200px;
            height:70px;
            margin-top:-20px;
        }
        img.master{
            width:233px;
            height:315px;
            margin-top:-10px;
        }
    }
    div.info_box{
        width:967px;
        height:360px;
        float:right;
        box-shadow: 0 4px 4px 0 rgba(7,17,27,0.1);
        table{
            width:967px;
            height:360px;
            line-height: 24px;
            padding-left:20px;
            padding-right:20px;
            tr{
                height:48px;
                td{
                    position:relative;
                    p{
                        width:100%;
                        height:200px;
                        text-indent: 2em;
                    }
                    div.box{
                        width:0px;
                        height:0px;
                        border-top:50px solid #F3F5F7;
                        border-left:50px solid #A09F9F;
                        box-shadow: -7px 7px 7px rgba(0,0,0,0.3); 
                        position:absolute;
                        top:-2px;
                        right:-24px;
                        transition: all 0.5s ease;-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
//                      width:0;   
//                      height:0;   
//                      border-left:48px solid transparent;   
//                      border-right:48px solid transparent;   
//                      border-top:48px solid #0066cc;
//                      background: red;
//                      /*设置旋转轴*/
//                      transform-origin:50% 50%;
//                      /*旋转角度*/
//                      transform: rotateZ(45deg);
                    }
                }
            }
        }
    }
}

//工作经历
div.job{
    width:1200px;
    margin:auto;
    margin-top:30px;
    border-radius: 3px;
    box-shadow: 0 4px 4px 0 rgba(7,17,27,0.1);
    p{
        font-size:16px;
        line-height: 36px;
        background:#AA72FA;
        text-indent: 1em;
        border-radius: 3px;
        text-shadow:2px 2px 4px #C3C3C3;
    }
    table{
        width:1200px;
        td.left{
            width:100px;
            text-indent: 1em;
        }
        td{
            line-height: 36px;
        }
    }
}

//相关技能
div.skill{
    width:1200px;
    margin:auto;
    margin-top:30px;
    border-radius: 3px;
    box-shadow: 0 4px 4px 0 rgba(7,17,27,0.1);
    p{
        font-size:16px;
        line-height: 36px;
        background:#FBD173;
        text-indent: 1em;
        border-radius: 3px;
        text-shadow:2px 2px 4px #C3C3C3;
    }
    table{
        width:1200px;
        td{
            line-height: 36px;
        }
        td.left{
            width:600px;
            a{
                display: block;
                height:36px;
                transition: all 1.5s ease;-webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -o-transition: all 1.5s ease;
                white-space: nowrap;
                overflow: hidden;
                color:white;
                span{
                    float:right;
                }
            }
        }
        td.right{
            width:600px;
        }
    }
}

//前端项目
div.web{
    width:1200px;
    margin:auto;
    margin-top:30px;
    border-radius:3px;
    overflow: hidden;
    padding-bottom: 4px;
    p{
        font-size:16px;
        line-height: 36px;
        border-bottom:2px solid #F874FE;
        text-indent: 1em;
        border-radius: 3px;
        text-shadow:2px 2px 4px #C3C3C3;
    }
    ul{
        width:1200px;
        margin-top:15px;
        li{
            width:220px;
            height:220px;
            box-shadow: 1px 1px 4px 2px rgba(7,17,27,0.1);
            float:left;
            margin-right:15px;
            text-align: center;
            margin-left:2px;
            overflow: hidden;
            position:relative;
            text-align: center;
            /*景深*/
            perspective: 600px;
            /*设置3d环境*/
            transform-style: preserve-3d;
            /*指定运动*/
            transition: all 1s linear;
            top:0px;
            left:0px;
            &:hover a.show{
                /*设置旋转轴*/
                transform-origin:50% 50%;
                /*旋转角度*/
                transform: rotateY(-180deg);
            }
            &:hover a.hide{
                /*设置旋转轴*/
                transform-origin:50% 50%;
                /*旋转角度*/
                transform: rotateY(-360deg);
            }
            &:hover p.title{
                color:#F01414;
            }
            a.hide{
                width:220px;
                height:220px;
                position:absolute;
                top:0px;
                left:0px;
                transition: all 0.5s;-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;
                /*如果图片背面冲屏幕,那么不显示*/
                backface-visibility: hidden;
                /*设置旋转轴*/
                transform-origin:50% 50%;
                /*旋转角度*/
                transform: rotateY(-180deg);
                p{
                    font-size:12px;
                    line-height: 20px;
                    text-indent: 1em;
                    border:none;
                }
                p.title{
                    font-size:16px;
                    line-height: 24px;
                    padding-bottom: 5px;
                    border-bottom: 1px solid #E0E0E0;
                    background:#77D7BB;
                }
                p.p_con{
                    font-size:22px;
                    line-height: 196px;
                }
            }
            a.show{
                display: block;
                position:absolute;
                top:0px;
                left:0px;
                width:220px;
                height:220px;
                text-shadow:2px 2px 4px #C3C3C3;
                transition: all 0.5s;-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;
                /*如果图片背面冲屏幕,那么不显示*/
                backface-visibility: hidden;
                &:hover p{
                    color:#F01414;
                }
                p{
                    line-height: 24px;
                    padding-bottom: 5px;
                    border-bottom: 1px solid #E0E0E0;
                    background:#77D7BB;
                }
                img{
                    width:220px;
                    height:196px;
                }
            }
        }
    }
}

//PHP项目
div.backstage{
    width:1200px;
    margin:auto;
    margin-top:30px;
    border-radius:3px;
    overflow: hidden;
    padding-bottom: 4px;
    p{
        font-size:16px;
        line-height: 36px;
        text-indent: 1em;
        border-radius: 3px;
        text-shadow:2px 2px 4px #C3C3C3;
        border-bottom:2px solid #FDC473;
    }
    ul{
        width:1200px;
        margin-top:15px;
        li{
            width:220px;
            height:220px;
            box-shadow: 1px 1px 4px 2px rgba(7,17,27,0.1);
            float:left;
            margin-right:15px;
            text-align: center;
            margin-left:2px;
            overflow: hidden;
            position:relative;
            text-align: center;
            /*景深*/
            perspective: 600px;
            /*设置3d环境*/
            transform-style: preserve-3d;
            /*指定运动*/
            transition: all 1s linear;
            top:0px;
            left:0px;
            &:hover a.show{
                /*设置旋转轴*/
                transform-origin:50% 50%;
                /*旋转角度*/
                transform: rotateY(-90deg);
            }
            &:hover a.hide{
                /*设置旋转轴*/
                transform-origin:50% 50%;
                /*旋转角度*/
                transform: rotateY(-360deg);
            }
            &:hover p.title{
                color:#F01414;
            }
            a.hide{
                width:220px;
                height:220px;
                position:absolute;
                top:0px;
                left:0px;
                transition: all 0.5s;-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;
                /*设置旋转轴*/
                transform-origin:50% 50%;
                /*旋转角度*/
                transform: rotateY(-270deg);
                /*如果图片背面冲屏幕,那么不显示*/
//              backface-visibility: hidden;
                p{
                    font-size:12px;
                    line-height: 16px;
                    text-indent: 1em;
                    border:none;
                    margin-top:10px;
                }
                p.title{
                    font-size:16px;
                    line-height: 24px;
                    padding-bottom: 5px;
                    border-bottom: 1px solid #E0E0E0;
                    background:#77D7BB;
                    margin-top:0px;
                }
            }
            a.show{
                display: block;
                position:absolute;
                top:0px;
                left:0px;
                width:220px;
                height:220px;
                text-shadow:2px 2px 4px #C3C3C3;
                transition: all 0.5s;-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;
                /*如果图片背面冲屏幕,那么不显示*/
//              backface-visibility: hidden;
                &:hover p{
                    color:#F01414;
                }
                p{
                    line-height: 24px;
                    padding-bottom: 5px;
                    border-bottom: 1px solid #E0E0E0;
                    background:#77D7BB;
                }
                img{
                    width:220px;
                    height:196px;
                }
            }
        }
    }
}

//联系方式
div.contact{
    width:1200px;
    margin:auto;
    margin-top:30px;
    border-radius:3px;
    overflow: hidden;
    padding-bottom: 4px;
    p{
        font-size:16px;
        line-height: 36px;
        text-indent: 1em;
        border-radius: 3px;
        text-shadow:2px 2px 4px #C3C3C3;
        border-bottom:2px solid #74B0FE;
    }
    ul{
        width:1250px;
        margin-top:15px;
        li.map{
            width:690px;
            height:220px;
        }
        li{
            width:220px;
            height:220px;
            box-shadow: 1px 1px 4px 2px rgba(7,17,27,0.1);
            float:left;
            margin-right:22px;
            text-align: center;
            margin-left:2px;
            overflow: hidden;
            a{
                display: block;
                width:100%;
                height:100%;
                text-shadow:2px 2px 4px #C3C3C3;
                &:hover p{
                    color:#F01414;
                }
                p{
                    line-height: 24px;
                    padding-bottom: 5px;
                    border-bottom: 1px solid #E0E0E0;
                    background:#77D7BB;
                }
                img{
                    width:220px;
                    height:196px;
                }
            }
        }
    }
}

//推荐好友
div.master{
    width:1200px;
    margin:auto;
    overflow: hidden;
    margin-top:30px;
    padding-bottom:8px;
    &>p{
        font-size:16px;
        line-height: 36px;
        text-indent: 1em;
        border-radius: 3px;
        text-shadow:2px 2px 4px #C3C3C3;
        border-bottom:2px solid #74B0FE;
    }
    ul{
        width:1300px;
        margin-top:15px;
        padding-bottom:8px;
        li{
            width:125px;
            height:160px;
            float:left;
            margin-right:26px;
            box-shadow: 1px 1px 5px 2px rgba(7,17,27,0.2);
            position:relative;
            &:hover p{
                background:rgba(20,20,20,0.2); 
            }
            &:hover{
                box-shadow: 0px 0px 8px 3px rgba(7,17,27,0.3);
            }
            a{
                display: block;
                width:125px;
                height:160px;
                position:absolute;
                top:0px;
                left:0px;
                img{
                    width:125px;
                    height:160px;
                }
            }
            p{
                width:125px;
                height:24px;
                text-align: center;
                line-height: 24px;
                padding-bottom: 5px;
                border-bottom: 1px solid #E0E0E0;
                position:absolute;
                left:0px;
                bottom: 0px;
                background:rgba(20,20,20,0.5);
                color:white;
                letter-spacing:2px;
            }
        }
    }
}

//底部
div.footer{
    width:100%;
    height:120px;
    background:#141414;
    margin-top:30px;
    div{
        width:1200px;
        height:120px;
        margin:auto;
        text-align: center;
        color:white;
        p.end{
            padding-top:30px;
            font-size:22px;
            line-height: 36px;
        }
        p.git{
            font-size:16px;
            line-height: 24px;
        }
    }
}

//返回头部
div.footer_top{
    position:fixed;
    display: none;
    right:60px;
    bottom:120px;
    width:60px;
    height:60px;
}

//QQ附件区
div.qq{
    width: 60px;
    height: 120px;
    position: fixed;
    top: 40%;
    right: 0px;
}
